<template>
  <div class="contractManagement">
    <div class="CM_top flex justify-between items-center mb-10px">
      <el-button class="bt_green"
        ><svg-icon icon-class="upload"></svg-icon
        ><span class="ml-4px">导出数据</span></el-button
      >
      <div class="Top_search_box">
        <el-input placeholder="搜索渠道名称/手机号/渠道销售" v-model="value">
          <svg-icon icon-class="search" slot="suffix" />
        </el-input>
      </div>
    </div>
    <div class="my_search -ml-20px">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="search_form"
        labelPosition="left"
      >
        <el-form-item label="合同类型：" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同状态：" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同生效时间：" prop="region">
          <el-date-picker
            v-model="ruleForm.time"
            type="date"
            :clearable="false"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="合同创建时间：" prop="region">
          <el-date-picker
            v-model="ruleForm.time"
            type="date"
            :clearable="false"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="合同到期时间：" prop="region">
          <el-date-picker
            v-model="ruleForm.time"
            type="date"
            :clearable="false"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="所在省份：" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在城市：" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="submit_clear">
        <el-button class="bt_gray">查询</el-button>
        <el-button class="bt_White">清空</el-button>
      </div>
    </div>
    <div class="content">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="渠道名称"> </el-table-column>
        <el-table-column prop="name" label="渠道ID"> </el-table-column>
        <el-table-column prop="address" label="渠道类型"> </el-table-column>
        <el-table-column prop="address" label="渠道等级"> </el-table-column>
        <el-table-column prop="address" label="渠道状态"> </el-table-column>
        <el-table-column prop="address" label="注册时间"> </el-table-column>
        <el-table-column prop="address" label="签约时间"> </el-table-column>
        <el-table-column prop="address" label="手机号"> </el-table-column>
        <el-table-column prop="address" label="是否开通商城"> </el-table-column>
        <el-table-column prop="address" label="渠道开发人员"> </el-table-column>
        <el-table-column prop="address" label="渠道介绍人员"> </el-table-column>
        <el-table-column prop="address" label="渠道运营"> </el-table-column>
        <el-table-column prop="address" label="所在省份"> </el-table-column>
        <el-table-column prop="address" label="所在城市"> </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <div class="but_list">
              <el-button type="text" size="small">编辑</el-button>
              <el-button type="text" size="small">取消合同</el-button>
            </div>
          </template></el-table-column
        >
      </el-table>
    </div>
    <Pagination :total="300"></Pagination>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
export default {
  components: {
    Pagination,
  },
  data() {
    return {
      value: "",
      ruleForm: { time: "", region: "" },
      rules: {},
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.contractManagement {
  .my_search {
    display: flex;
    justify-content: space-between;
  }
  .submit_clear {
    display: flex;
  }
  .content {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-bottom: 0;
    .but_list {
      display: flex;
      flex-direction: column;
      ::v-deep .el-button--text {
        margin: 0;
        line-height: 20px;
        span {
          justify-content: left;
          color: #1d6fe9;
        }
      }
    }
  }
}
</style>
